import { View, Text, StyleSheet } from 'react-native'
import React, { useState } from 'react'
import { zhBorderColor, zhBorderWidth, zhSpacingColBase, zhSpacingColLg, zhSpacingRowBase, zhSpacingRowLg, zhThemeColor } from '../global'

export default function ZhTabsHeader({changeValue}) {
  // changeValue 保存就是传递过来的setIdx
  // 定义状态变量，用于当前点击的边框显示
  const [cur,setCur] = useState(0)
  return (
    <View style={ss.header}>
      <Text 
        style={[ss.item, {borderBottomColor: cur === 0 ? zhThemeColor : 'transparent'}]} 
        onPress={() => {
          changeValue(0)
          setCur(0)
        }}>
          商品
      </Text>
      <Text
        style={[ss.item, {borderBottomColor: cur === 1 ? zhThemeColor : 'transparent'}]} 
        onPress={() => {
          changeValue(1)
          setCur(1)
        }}
      >
          评价
      </Text>
      {/* 如果要将值传递给父组件的状态变量idx，需要有函数setIdx */}
      <Text 
        style={[ss.item, {borderBottomColor: cur === 2 ? zhThemeColor : 'transparent'}]} 
        onPress={() => {
          changeValue(2)
          setCur(2)
        }}
      >
        介绍
      </Text>
    </View>
  )
}

const ss = StyleSheet.create({
  header: {
    flexShrink: 0,  // 尺寸收缩权重  0：计时兄弟组件高度不够，也不能收缩
    flexDirection: 'row',
    paddingVertical: zhSpacingColLg,
    paddingHorizontal: zhSpacingRowLg,
    borderBottomWidth: zhBorderWidth,
    borderBottomColor: zhBorderColor,
    marginBottom: zhSpacingColBase
  },
  item: {
    paddingHorizontal: zhSpacingRowBase,
    borderBottomColor: 'transparent',
    borderBottomWidth: zhBorderWidth,
    marginHorizontal: zhSpacingRowLg,
    paddingVertical: zhSpacingColBase
  }
})